<template>
    <div class="app-container">
        <el-form :model="form" class="form-inline" ref="form" label-width="90px">
            <el-row :gutter="4">
                <el-col :lg="6" :xl="4"><el-form-item label="注册手机号" style="width:100%">
                        <el-input v-model="form.phonenumber" placeholder="注册手机号"></el-input>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4"><el-form-item style="width:100%" label="审核状态">
                        <el-select v-model="form.checkStatus" placeholder="审核状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="未审核" :value="0"></el-option>
                            <el-option label="待审核" :value="1"></el-option>
                            <el-option label="审核未通过" :value="2"></el-option>
                            <el-option label="审核通过" :value="3"></el-option>
                        </el-select>
                    </el-form-item></el-col>
                <el-col :lg="6" :xl="4">
                    <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-table ref="table" :data="tableData">
            <!-- <el-table-column prop="type" label="类型" width="180">
            </el-table-column> -->
            <el-table-column prop="enterpriseName" align="center" label="企业全称" width="180">
            </el-table-column>
            <el-table-column prop="phonenumber" align="center" label="注册手机号">
            </el-table-column>
            <el-table-column prop="contactName" align="center" label="联系人">
            </el-table-column>
            <el-table-column prop="contactPhone" align="center" label="联系电话">
            </el-table-column>
            <el-table-column prop="balance" align="center" label="个人余额">
            </el-table-column>

            <el-table-column align="center" prop="insureMoney" label="总投保金额" width="120">
            </el-table-column>
            <el-table-column align="center" prop="claimMoney" label="总理赔金额" width="120">
            </el-table-column>
            <el-table-column align="center" prop="insureNum" label="总投保成功订单数" width="130">
            </el-table-column>
            <el-table-column align="center" prop="claimNum" label="总索赔订单数" width="120">
            </el-table-column>
            <el-table-column prop="balance" align="center" label="投保金额">
            </el-table-column>
            <el-table-column prop="checkStatus" align="center" label="审核状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.checkStatus === '0'">未审核</el-tag>
                    <el-tag v-if="scope.row.checkStatus === '1'">待审核</el-tag>
                    <el-tag v-if="scope.row.checkStatus === '2'" type="danger">审核未通过</el-tag>
                    <el-tag v-if="scope.row.checkStatus === '3'" type="success">审核通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="balance" align="center" label="保单数量">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope" v-if="scope.row.roleId !== 1">
                    <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.checkStatus === '1'" size="mini" type="text"
                        icon="el-icon-document-checked" @click="examine(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top:20px" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
            :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>
        <view-or-examine :getTableData="getTableData" ref="viewOrExamine"></view-or-examine>
    </div>
</template>
<script>
import viewOrExamine from './viewOrExamine.vue';
import { deepClone } from '@/utils';

export default {
    components: { viewOrExamine },
    data() {
        return {
            page: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },

            form: {
                // date: '',
                // enterpriseName: '',
                phonenumber: '',
                checkStatus: ''
            },
            tableData: [],
            tableHeight: 0,
            screenHeight: document.body.clientHeight
        }
    },
    methods: {
        exportFile() {
            //
        },
        handleSizeChange(val) {
            this.page.pageSize = val
            this.getTableData()
        },
        handleCurrentChange(val) {
            this.page.pageNum = val
            this.getTableData()
        },
        view(row) {
            this.$refs.viewOrExamine.dialogFormVisible = true
            this.$refs.viewOrExamine.title = '查看'
            this.$refs.viewOrExamine.isExamine = false
            this.$refs.viewOrExamine.row = row
        },
        examine(row) {
            this.$refs.viewOrExamine.dialogFormVisible = true
            this.$refs.viewOrExamine.title = '审核'
            this.$refs.viewOrExamine.isExamine = true
            this.$refs.viewOrExamine.customerId = row.customerId
            this.$refs.viewOrExamine.row = row
        },
        setTableHeight() {
            this.$nextTick(() => {
                const queryConditionHeight = this.$refs.form.$el.offsetHeight
                this.tableHeight = (window.innerHeight - queryConditionHeight - 180) + 'px'
            })
        },
        getTableData() {
            const params = {
                ...deepClone(this.form),
                pageNum: this.page.pageNum,
                pageSize: this.page.pageSize
            }
            this.$get('/system/customer/list', params).then(res => {
                if (res && res.code * 1 === 200) {
                    this.tableData = res.rows
                    this.page.total = res.total
                } else {
                    this.tableData = []
                    this.page.total = 0
                }
            })
        }
    },
    mounted() {
        window.onresize = () => {
            this.setTableHeight()
        }
        this.setTableHeight()
        this.getTableData()
    }
}
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
    width: 100%;

    .el-form-item__label {
        // padding: 0;
    }
}
</style>
